<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>LMP</title>
    <style>
      #app p{
        font-size: 24px;
        font-weight: bold;
      }
    </style>
      
  </head>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <body>
    <div id="app">
      <el-row>
        <el-col :span="4" :offset="8">
          <div>
            <el-row>
              <p>Linux Microscope</p>
            </el-row>
            <el-row>
              <img style="height:80px" src="./imgs/LMP-logo.png"/>
            </el-row>            
          </div>
        </el-col>
        <el-col :span="6">
          <img style="height:150px;margin-top: 20px;" src="./imgs/Linux.jpg"/>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-col :span="20" :offset="2">
          <el-table
            ref="multipleTable"
            stripe
            :data="collectTypes"
            tooltip-effect="dark"
            style="width: 100%"
            :height="tableHeight"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="200">
            </el-table-column>
            <el-table-column
              prop="type"
              label="类型"
              width="100">
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              width="120">
            </el-table-column>            
            <el-table-column
              prop="desc"
              label="描述"
              show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <div style="margin-left: 70%;">
            <span>CollectTime (s)</span>
            <el-input v-model="inputTime" style="width:180px" placeholder="请输入时间(s)"></el-input>            
            <el-button style="margin-top: 10px" type="primary" @click="submit">submit</el-button>
          </div>
        </el-col>
        <!-- <div id="inner">
          <form action="/data/collect" method="post">
            <el-row>
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="t in collectTypes" :label="t.label" :key="t.key">{{t.label}}</el-checkbox>
              </el-checkbox-group>
            </el-row>
            <el-row style="margin-top: 10px">
              <span>CollectTime</span>
              <el-input v-model="inputTime" style="width:180px" placeholder="请输入时间(min)"></el-input>
            </el-row>            
          </form>
          <el-button style="margin-top: 10px" type="primary" @click="submit">submit</el-button>
        </div> -->
      </el-row>
    </div>

  </body>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
          tableHeight:document.documentElement.clientHeight - 270,
          checkList:[],
          selectedList:[],
          collectTypes:[
            {name:"cpuutilize", type:"bcc"},
            {name:"irq", type:"bcc"},
            {name:"memusage", type:"bcc"},
            {name:"picknext",  type:"bcc"},
            {name:"runqlen", type:"bcc"},
            {name:"vfsstat", type:"bcc"},
            {name:"ContainerNet", type:"bcc"},
            {name:"dcache", type:"bcc"},
            {name:"oomkill", type:"bcc"},
            {name:"runqslower", type:"bcc"},
            {name:"slabratetop", type:"bcc"},
            {name:"memleak", type:"bcc"},
            {name:"shmsnoop", type:"bcc"},
            {name:"drsnoop", type:"bcc"},
            {name:"cachetop", type:"bcc"},
            {name:"filetop", type:"bcc"},
            {name:"runqlat", type:"bcc"},
            {name:"softirqs", type:"bcc"},
            {name:"cpudist", type:"bcc"},
            {name:"sofdsnoop", type:"bcc"},
            {name:"filelife", type:"bcc"},
            {name:"cachestat", type:"bcc"},
            {name:"dcstat", type:"bcc"},
            {name:"dcsnoop", type:"bcc"},
            {name:"fileslower", type:"bcc"},
            {name:"vfscount", type:"bcc"},
	          {name:"mountsnoop",type:"bcc"},
            {name:"mdflush",type:"bcc"},
            {name:"biotop",type:"bcc"},
            {name:"biosnoop",type:"bcc"},
            {name:"ext4slower",type:"bcc"},
            {name:"tcptop",type:"bcc"},
            {name:"tcplife",type:"bcc"},
            {name:"tcptracer",type:"bcc"},
            {name:"tcpconnect",type:"bcc"},
            {name:"tcpconnlat",type:"bcc"},
            {name:"tcpretrans",type:"bcc"},
            {name:"tcpsubnet",type:"bcc"},
            {name:"tcpdrop",type:"bcc"},
            {name:"btrfsdist",type:"bcc"},
            {name:"btrfsslower",type:"bcc"},
            {name:"zfsslower",type:"bcc"},
            {name:"xfsslower",type:"bcc"},
            {name:"nfsslower",type:"bcc"},
            {name:"zfsdist",type:"bcc"},
            {name:"nfsdist",type:"bcc"},
            {name:"xfsdist",type:"bcc"},
            {name:"ext4dist",type:"bcc"},
          ],
          inputTime:"0",
         }
      },
      methods:{
        handleSelectionChange(selections) {
          this.selectedList = selections;
        },
        submit() {
          if (this.selectedList.length == 0) {
            this.$message({
              message: '请选择采集项',
              type: 'warning'
            });
          }else{       
          var plugins = {};
          var message_plugins=""
          for (var i = 0; i < this.selectedList.length; i++) {
            var collect = this.selectedList[i];
            var name = collect.name
            var index= i+1
            message_plugins=message_plugins+"  "+index+"."+name;
            plugins[`${name}`] = collect.type;
          }
          
          var collectParam = {};
          collectParam.plugins = plugins;
          collectParam.pluginsruntime = parseInt(this.inputTime);
          
          //弹窗
          const h = this.$createElement;
          this.$msgbox({
            title: '提醒',
            message: h('p', null, [
              h('span', null, '是否下发插件?'),
              h('i', { style: 'color: teal' }, message_plugins)
            ]),
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                axios.post('/collectdata', collectParam, {emulateJSON:true})

                instance.confirmButtonLoading = true;
                instance.confirmButtonText = '执行中...';
                setTimeout(() => {
                  done();
                  setTimeout(() => {
                    instance.confirmButtonLoading = false;
                  }, 300);
                }, collectParam.pluginsruntime*1000);//时间
              } else {
                done();
              }
            }
          }).then(action => {
            // confirm_data();
            this.$message({
              type: 'success',
              message: '数据收集完成!'
            });
          }); 
          // axios.then(function (response) {
          //   console.log("response");
          // })
          // axios.catch(function (error) { // 请求失败处理
          //   console.log(error);
          // }); 
          }  
        }
      }
    })
  </script>
</html>
